<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        ul {
            margin: 0;
            padding: 0;
        }

        #app {
            margin: 0 auto;
            width: 700px;
        }

        ul {
            list-style: none;
        }

        span {
            width: 150px;
            display: inline-block;
        }

        h1 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>水果列表清单</h1>
        <ul class="myul">
            <li>
                <span>名称</span>
                <span>数量</span>
                <span>单价</span>
                <span>操作</span>
            </li>
        </ul>
        总计：<span id="total"></span>
        <p>水果名称：<input type="text"></p>
        <p>水果数量：<input type="text"></p>
        <p>水果单价：<input type="text"></p>
        <button onclick="add()" id="add">添加</button>
    </div>
</body>

</html>
<script>
    var fruits = [
        {
            fruitName: '苹果',
            fruitQuantity: 30,
            fruitPrice: 3.8
        },
        {
            fruitName: '西瓜',
            fruitQuantity: 240,
            fruitPrice: 1.8
        },
        {
            fruitName: '芒果',
            fruitQuantity: 60,
            fruitPrice: 7.8
        }
    ]
    // 1.通过id获取元素
    // let add=document.getElementById('add')
    // 2.getElementsByTagName通过标签名称获取DOM元素的集合
    // let ul=document.getElementsByTagName('ul')[0]
    // 3.getElementsByClassName通过样式名称获取DOM元素的集合
    // let ul=document.getElementsByClassName('myul')[0]
    // 4.通过样式选择器获取元素或者集合,querySelector获取满足条件的第一个元素
    let ul = document.querySelector('ul')
    // 保存ul的初始状态
    let tmp = ul.innerHTML
    let p = document.querySelectorAll('p>input')
    // 索引初始值，用判断添加或删除
    let fruitIndex = -1
    // let ul=document.querySelectorAll('ul')[0]
    // 初始化界面
    function init() {
        // 恢复初始状态
        ul.innerHTML = tmp
        for (let i in fruits) {
            // 每遍历一次产生一个li元素，注意ES6的模版语法
            let li = `<li>
                <span>${fruits[i].fruitName}</span>
                <span>${fruits[i].fruitQuantity}</span>
                <span>${fruits[i].fruitPrice}</span>
                <span>
                    <button onclick="delFruit(${i})">删除</button>
                    <button onclick="update(${i})">修改</button>
                </span>
            </li>`
            ul.innerHTML += li;
        }
        let total=fruits.reduce((total,itme)=>{
            return total+=itme.fruitPrice*itme.fruitQuantity
        },0)
        document.getElementById('total').innerHTML=total
    }
    init()
    // 修改
    function update(index) {
        //索引改“修改
        fruitIndex = index;
        let fruit = fruits[index]
        p[0].value = fruit.fruitName
        p[1].value = fruit.fruitQuantity
        p[2].value = fruit.fruitPrice
        document.getElementById('add').innerHTML = "确定修改"
    }
    //删除
    function delFruit(index) {
        // console.log(index);
        if (confirm('你确定要删除吗？')) {
            fruits.splice(index, 1)
            init()
        }
    }
    // 添加水果
    function add() {
        let fruit = {}
        fruit.fruitName = p[0].value
        fruit.fruitQuantity = p[1].value
        fruit.fruitPrice = p[2].value
        //索引值为-1时，添加水果
        if (fruitIndex == -1) {
            fruits.push(fruit)
            // 重新渲染页面
            init()
        } else {
            fruits.splice(fruitIndex, 1, fruit)
            init()
            document.getElementById('add').innerHTML = "添加"
            fruitIndex = -1
        }
        p[0].value=''
        p[1].value=''
        p[2].value=''
    }
</script>